<template>
  <div class="question-edit-image">
    <p>#{{ id }}</p>
    <p>已存在的图片暂时无法编辑，只能重新上传。</p>
    <image-input v-model="form.image"></image-input>
    <!-- 确定 -->
    <mu-button full-width color="success" @click="uploadImage()">上传图片</mu-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ImageInput from '@/components/ImageInput'
import api from '@/api'

export default {
  name: 'QuestionEditImage',
  components: {
    ImageInput
  },
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      form: {
        image: null
      }
    }
  },
  computed: {
    ...mapGetters({
      qcConfig: 'questionCreateConfig'
    })
  },
  methods: {
    async uploadImage() {
      const image = this.form.image
      const autoClip = this.qcConfig.clip === 'auto'
      if (image) {
        try {
          await api.uploadImage(this.id, { image }, autoClip)
          this.$toast.success('上传成功！')
        } catch (err) {
          this.$apiCatch(err)
        }
      } else {
        this.$toast.warning('您还没有选择任何图片')
      }
    }
  }
}
</script>

<style scoped>
.question-edit-image {
  margin: 0 auto;
  width: 500px;
  padding: 12px;
}

.is-phone .question-edit-image {
  width: 100%;
}
</style>
